﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>类型设置</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    @* 查新条件 *@
    <div class="layui-inline layui-form">
        类型名称：
        <div class="layui-inline">
            <input class="layui-input layui-input-inline" id="toolTypeName" placeholder="请输入类型名称" />
        </div>
        保养维护类型：
        <div class="layui-inline">
            <select id="maintenType" lay-filter="aihao">
                <option value="" selected>请选择保养维护类型</option>
                <option value="定期维护">定期维护</option>
                <option value="按使用次数维护">按使用次数维护</option>
            </select>
        </div>
        <div class="layui-inline">
            <button type="button" id="btnSearch" class="layui-btn layui-btn layui-btn-normal">
                <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="button" id="btnAdd" class="layui-btn layui-btn layui-btn-success">
                <i class="layui-icon layui-icon-add-1"></i>添加
            </button>
            @*  <button type="button" class="layui-btn layui-btn layui-btn-danger">
            <i class="layui-icon layui-icon-delete"></i> 删除
            </button> *@
        </div>
    </div>
    @* 表格 *@
    <table class="layui-hide" id="tableDemo"></table>
    @* 操作列 *@
    <script type="text/html" id="barDemo">
        @* <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a> *@
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" >删除</a>
    </script>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>

    <script>
        layui.use('table', function () {
            var table = layui.table;
            var layer = layui.layer;

            querylist = function () {
                var toolTypeName = $("#toolTypeName").val();
                var maintenType = $("#maintenType").val();
                table.render({
                    elem: '#tableDemo'
                    , url: '/Zhou/GetToolTypeList?toolTypeName=' + toolTypeName + '&maintenType=' + maintenType
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度
                    , page: true //开启分页
                    , limit: 10
                    , limits: [10, 20, 50, 100]
                    , request: {
                        pageName: 'pageIndex', //页码的参数名称，默认：page
                        limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    }
                    , cols: [[
                        { field: 'ToolTypeCode', title: '类型编号', sort: true, align: 'center' }
                        , { field: 'ToolTypeName', title: '类型名称', align: 'center' }
                        //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        , {
                            field: 'CodeFlag', title: '是否单独编码管理', align: 'center', templet: function (row) {
                                var tmp = row.CodeFlag == 'Y' ? "是" : "否";
                                return tmp;
                            }
                        }
                        , { field: 'MaintenType', title: '保养维护类型', align: 'center' }
                        , { field: 'MaintenPeriod', title: '保养周期', align: 'center' }
                        , { field: 'Remark', title: '备注', align: 'center' }
                        , { fixed: '', title: '操作列', width: 165, align: 'center', toolbar: '#barDemo' }
                    ]],
                    height: 500
                });
            }

            querylist();
            //查询
            $("#btnSearch").on("click", function () {
                querylist();
            })
            //添加
            $("#btnAdd").on("click", function () {
                layer.open({
                    type: 2,
                    title: '<h2  style="text-align:center;">添加工装夹具类型</h2>',
                    area: ['1000px', '500px'],
                    // offset: ['0%', '20%'],
                    offset: 'auto',
                    // top: '50%',
                    content: '/Zhou/AddToolTypeView',
                    end: function () {
                        location.reload();
                    }
                });
            })

            //监听 表行 工具栏事件
            table.on('tool(tableDemo)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'delete') {
                    layer.confirm('确认要删除吗？', function (index) {
                        var id = { id: data.Id };
                        $.get('/Zhou/DeleteToolType', id, function (res) {
                            if (res) {
                                layer.msg("删除成功", { icon: 1, time: 500 }, function () {
                                    obj.del();
                                    // 刷新表格
                                    table.reload('tableDemo');
                                });
                            } else {
                                layer.msg("删除失败", { icon: 2, time: 1000 });
                            }
                        });
                    });
                }
                else if (layEvent === 'edit') {
                    id = data.Id;
                    toolTypeCode = data.ToolTypeCode;
                    toolTypeName = data.ToolTypeName;
                    codeFlag = data.CodeFlag;
                    maintenType = data.MaintenType;
                    maintenPeriod = data.MaintenPeriod;
                    remark = data.Remark;
                    createTime = data.CreateTime;
                    layer.open({
                        type: 2,
                        title: '<h2  style="text-align:center;">编辑工装夹具类型</h2>',
                        area: ['1000px', '600px'],
                        // offset: ['0%', '20%'],
                        offset: 'auto',
                        // top: '50%',
                        content: '/Zhou/UpdateToolTypeView',
                        end: function () {
                            querylist();
                        }
                    });
                }
            });
        });
    </script>

</body>
</html>